<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
    <style>
      .form-select {
        width: 103px;
        display: inline-block;
      }

      .col-form-label {
        text-align: right;
      }

      .figure-img {
        width: 100px;
        height: 100px;
      }

      #upload {
        display: none;
      }

      .figure-caption {
        cursor: pointer;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <h1 class="p-5">个人设置</h1>
      <form class="col-6">
        <div class="row mb-3">
          <label class="col-form-label col-3">用户名：</label>
          <div class="col-7">
            <input id="username" disabled class="form-control col-9" type="text" />
          </div>
        </div>
        <div class="row mb-3">
          <label class="col-form-label col-3">籍贯：</label>
          <div class="col-9">
            <select class="form-select col-4" name="province">
              <option value="">--省--</option>
            </select>
            <select class="form-select col-4" name="city">
              <option value="">--市--</option>
            </select>
            <select class="form-select col-4" name="county">
              <option value="">--县--</option>
            </select>
          </div>
        </div>
        <div class="row mb-3">
          <label class="col-form-label col-3">头像：</label>
          <div class="col-9">
            <figure class="figure">
              <input type="file" id="upload" />
              <img src="./imgs/default.jpg" class="figure-img img-fluid rounded" alt="..." />
              <figcaption class="figure-caption">修改头像</figcaption>
            </figure>
          </div>
        </div>
        <div class="row mb-3">
          <label class="col-3"></label>
          <div class="col-9">
            <button class="btn btn-primary">保存</button>
          </div>
        </div>
      </form>
    </div>

    <script src="./lib/bootstrap.min.js"></script>
    <script src="./lib/axios.js"></script>
    <script src="./lib/form-value.js"></script>
    <script src="./lib/request.js"></script>
    <script>
      let province = document.querySelector('[name = province]')
      let city = document.querySelector('[name = city]')
      let county = document.querySelector('[name=county]')
      ;(async function () {
       const {data} = await axios.get('/user/info')
       console.log(data);
       document.querySelector('#username').value = data.data.username
       if (data.data.avatar) {
        document.querySelector('img').src = data.data.avatar
      }
        if (data.data.province && data.data.city && data.data.county) {
           province.value = data.data.province
           let arr = ['<option value="">--市--</option>']
           const p1 =  axios.get('/api/city',{params:{pname:data.data.province}})
           const p2 =  axios.get('/api/county',{params:{
           pname:data.data.province,
           cname:data.data.city
         }})
         const [{data:data1},{data:data2}] = await Promise.all([p1,p2])
          data1.forEach(item => arr.push(`<option value="${item}">${item}</option>`))
           city.innerHTML = arr.join('')
           city.value = data.data.city
             let arr1 = ['<option value="">--县--</option>']
         
       data2.forEach(item => arr1.push(`<option value="${item}">${item}</option>`))
        county.innerHTML = arr1.join('')
           county.value = data.data.county
         }
      })()
      
      document.querySelector('figcaption').addEventListener('click', ()=>{
        document.querySelector('[type = file]').click()
      })
      document.querySelector('[type = file]').addEventListener('change',async function () {
        // console.dir(this);
        if (this.files.length) {
          const fd = new FormData()
          fd.append('avatar',this.files[0])
         const {data} = await axios.post('/user/avatar',fd)
         if (!data.status) {
          alert(data.message)
          document.querySelector('img').src = data.data
         }
        
        }
      })

      ;(async function () {
        const {data} = await axios.get('/api/province')
       let arr = ['<option value="">--省--</option>']
       data.forEach(item=>arr.push (`<option value="${item}">${item}</option>`))
        province.innerHTML = arr.join('')
      })()

      document.querySelector('[name = province]').addEventListener('change',async function () {
        county.innerHTML = '<option value="">--县--</option>'
        let arr = ['<option value="">--市--</option>']
        if (this.value === '') {
          return city.innerHTML = arr[0]
        }
       const {data} = await axios.get('/api/city',{params:{pname:province.value}})
      
       data.forEach(item => arr.push(`<option value="${item}">${item}</option>`))
       city.innerHTML = arr.join('')
      })

      document.querySelector('[name = city]').addEventListener('change',async function () {
        let arr = ['<option value="">--县--</option>']
        if (this.value === '') {
          return county.innerHTML = arr[0]
        }
       const {data} = await axios.get('/api/county',{params:{
        pname:province.value,
        cname:city.value
      }})
       data.forEach(item => arr.push(`<option value="${item}">${item}</option>`))
       county.innerHTML = arr.join('')
      })

      document.querySelector('button').addEventListener('click',async function (e) {
        e.preventDefault()
        // console.log(val(document.querySelector('form')));
        const {data} = await axios.post('/user/info', val(document.querySelector('form')))
        if (!data.status) {
          alert(data.message)
        }
      })


      
      
      
    </script>
  </body>
</html>
